:deep(.v-pagination__list) {
    padding-block: 10px;
}

// .r-page {
//     padding-bottom: 40px;
//     // background: #171a1f;
// }

:deep(.r-coll:last-child) {
    text-align: right;
}

:deep(.r-coll:nth-child(3)) {
    text-align: right;
    // background-color: rebeccapurple;
}

:deep(.r-table) {
    border: none;
}

.user {
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #B1B6C6;
    line-height: 20px;
    margin-left: 20px;
    width: 100%;
    .list {
        margin-top: 20px;
    }
}

.seeting {
    margin: 0 30px;
}
.r-page {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto !important;
}

.keep-px {
    width: 100%;
    margin: auto;
}

.u-pro {
    display: block;
    padding: 30px;
    padding-bottom: var(--space);

    .u-box {
        display: flex;
        padding: 30px;
        background: var(--card);
        // border: 1px solid var(--border);
        overflow-x: auto;
    }
}

.pro-img {
    width: 64px;
    height: 64px;
    background: #666b75;
    border-radius: 50%;
    object-fit: contain;
}

.pro-info {
    flex: 1;
    color: #b1b6c6;
    // font-size: 14px;
    margin-left: 30px;
}

.info-1 {
    // margin-top: 20px;
    margin-bottom: 20px;
    // font-size: 21px;
}

.info-2 {
    // margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    // font-size: 21px;
    // .wit {
    //     margin-top: 6px;
    //     display: block;
    //     padding-inline-end: 8px;
    //     overflow: hidden;
    //     text-overflow: ellipsis;
    // }
}

.info-lable {
    display: block;
    // width: 180px;
    white-space: nowrap;
    margin-bottom: 6px;
    padding-inline-end: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wit_use {
    font-size: 18px !important;
    font-weight: bold;
}

.wit {
    margin-top: 6px;
    font-size: 16px;
    color: #fff;
    display: block;
    white-space: nowrap;
    padding-inline-end: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.u-do {
    // padding: 20px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--card);
    // border-radius: 8px;
    // border: 1px solid var(--border);
    margin: 30px;
    margin-bottom: 20px;
    margin-top: 0;
}

.do-box {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.do-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.do-img2 {
    width: 80px;
    height: 80px;
}

.do-info {
    margin-left: 10px;
}

.do-line {
    width: 1px;
    height: 35px;
    background: #3a414c;
}

.do-if1 {
    // font-size: 21px;
    color: #ffffff;
}

.do-if2 {
    // font-size: 36px;
    margin-left: 12px;
    color: var(--main);
}

.do-if3 {
    // font-size: 21px;
    color: var(--main);
}

.book-nav,
.book-nav_,
.get-title {
    padding-left: 40px;
    padding-block: 16px;
    padding-bottom: 0;
    background-color: #1d2125;
}

.book-nav_ {
    margin-block: 0;
    // padding-block: 10px;
    // color: red;
    border-block: solid 1px var(--border);
}

.book-nav {
    display: flex;
    gap: 30px;
    font-size: 18px;
    margin-inline: 30px;

    // border-bottom: solid 1px var(--border);
    .b-nav {
        // margin-right: 60px;
        font-size: 16px;
        color: #b1b6c6;
        padding-bottom: 10px;

        &:hover {
            color: #fff;
        }
    }

    .choose {
        pointer-events: none;
        color: var(--main);
        padding-bottom: 10px;
        border-bottom: 3px solid var(--main);
    }
}

.b-title {
    font-weight: bold;
    margin: 10px;
}

.yzt_ {
    :deep(.r-coll:nth-child(3)) {
        text-align: left;
    }
}

.yzt_2 {
    :deep(.r-coll:nth-child(2)) {
        padding-left: 150px;
        // text-align: center;
        // background-color: blue;
    }
}

.b-table {
    margin: 30px;
    margin-top: 0px;
    margin-bottom: 20px;
    // border: 1px solid #3f454f;

    .b-head {
        height: 46px;
        background: #242930;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        // font-size: 16px;
        color: #b1b6c6;
    }

    .b-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        // font-size: 18px;
        color: #ffffff;
        height: 64px;
        border-bottom: 1px solid #3f454f;
    }

    .b-img {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        object-fit: contain;
        background: #6c98df;
        margin-right: 10px;
    }

    .hd1 {
        width: 200px;
        margin-left: 24px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .hd2 {
        flex: 2;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 10px;
    }

    .hd3 {
        flex: 1;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 10px;
    }

    .hd4 {
        width: 160px;
    }
}

:deep(.r-header) {
    box-sizing: content-box;
    border-bottom: 1px solid var(--border) !important;
}

:deep(.r-body) {
    // height: 56px !important;
    box-sizing: content-box;
    border-bottom: 1px solid var(--border) !important;
}

:deep(.r-body:last-child) {
    border-bottom: 0 !important;
}

.get-title {
    margin-inline: 30px;
    padding-block: 16px;
    font-size: 14px !important;
    border-block: 1px solid var(--border);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    // font-size: 16px;
    color: #ffffff;

    .get-tip {
        margin-right: 34px;
    }

    .get-btn {
        margin-right: 10px;
        border-radius: 4px;
        padding: 4px 16px;
        background: transparent;
        color: #b1b6c6;

        &:hover {
            background: #9b9c9e;
        }
    }

    .choose {
        pointer-events: none;
        color: #333333;
        background: var(--main);
    }
}

.hd5 {
    flex: 1;
    margin-left: 24px;
}

.hd6 {
    flex: 1;
}

.hd7 {
    flex: 1;
    text-align: right;
    margin-right: 24px;
    color: var(--main);
}

.info-all {
    display: flex;
    gap: 5%;
}

.item-lb {
    width: 90px;
    height: 30px;
    background: #242930;
    padding: 0 12px;
    color: #666b75;

    &:hover {
        background: #252930;
    }

    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .icon-sanjiaoxing {
        color: #fff;
        font-size: 12px;
        transform: scale(0.6);
    }
}

.item-dr {
    width: 90px;

    .inp-all {
        width: 100%;
    }
}

:deep(.v-list) {
    padding: 0;
}

:deep(.v-list-item) {
    background: var(--card);

    &:hover {
        background: var(--card-h);
    }

    border-bottom: 1px solid var(--border) !important;

    &:last-child {
        border-bottom: none !important;
    }
}

.lose {
    color: var(--lose);
}

.win {
    color: var(--win);
}

.d-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;

    .d-item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 30px;
        border: solid 2px #3f454f;
        border-radius: 4px;
        position: relative;
        background: #353c44;

        &.choose {
            border-color: var(--main);
            background: #2b313a;

            &::after {
                display: block;
                content: "";
                z-index: 1;
                width: 16px;
                height: 16px;
                background: url(@/assets/days.png) no-repeat center;
                background-size: 100%;
                position: absolute;
                right: -1px;
                top: -1px;
            }
        }
    }
}

.yue-btn {
    // width: 54px;
    height: 30px;
    border-radius: 30px;
    padding: 0;
    padding-inline: 10px;
}

.j-rgt {
    display: flex;
    justify-content: flex-end;
}

.yue-tb {
    :deep(.r-header) {
        .r-coll:last-child {
            // color: red;
            margin-right: 54px;
        }
    }
}

.book-nav_ {
    padding-bottom: 10px;
}